import React from "react";

// 错误边界一定要用class来实现
// 如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch()
// 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界

/**
 *  props的属性{
      children
      fallbackRender: 当异常出现时的备用方案，渲染的内容
    }
 */
type FallbackRender = (props: { error: Error | null }) => React.ReactElement;
class ErrorBoundary extends React.Component<
  React.PropsWithChildren<{ fallbackRender: FallbackRender }>,
  { error: Error | null }
> {
  state = { error: null };

  // 当ErrorBoundary子组件发生渲染错误时，这个方法会被调用，返回的值赋给state
  static getDerivedStateFromError(error: Error) {
    return { error };
  }

  render() {
    const { error } = this.state;
    const { fallbackRender, children } = this.props;
    if (error) {
      return fallbackRender({ error });
    }
    return children;
  }
}

export default ErrorBoundary;
